<extend name="work/base"/>
<block name="content">
    <!-- case-content -->
    <div class="service-content">
        <div class="service-contact">
            <div class="service-contact-box">
                <div class="layui-fluid">
                    <div class="layui-row ">
                        <div class="layui-col-xs12 layui-col-sm6 layui-col-md6 login">
                            <div class="text">
                                <h2>微步云服务</h2>
                                <div class="line"></div>
                                <p>
                                    为了更好的服务于客户，持续提高解决方案的的创新性及品质感，我们构建了清晰、可视、可持续改进的研发流程，我们的研发流程涉及市场分析、产品定位、用户分析、系统设计、程序开发、性能优化等，在每个环节我们都秉承着打造高品质移动互联网解决方案的开发理念。<br>
                                    无论您是想更贴近客户，传递身临其境的品牌体验，还是想加速创新、提高流程效率、降低成本，微步唐山能通过专业的研发流程为你提供定制化解决方案实现你期望的成果。<br>
                                </p>
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm5  layui-col-md5 fr login layui-col-md-offset1">
                            <h3>登录</h3>
                            <form class="layui-form" action="">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">手机号码</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="mobile" required  lay-verify="required|phone"
                                               placeholder="请输入手机号码" autocomplete="off" class="layui-input" lay-verType="tips">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">图形码</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="captcha" required lay-verify="required"
                                               placeholder="输入右边图形码" autocomplete="off" class="layui-input" lay-verType="tips"
                                               id="captcha">
                                    </div>
                                    <div class="layui-form-mid" style="padding: 0!important;"><img
                                            src="{:captcha_src()}" class="login-codeimg" id="vercode"></div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">密码框</label>
                                    <div class="layui-input-block">
                                        <input type="password" name="password" required lay-verify="required"
                                               placeholder="请输入密码" autocomplete="off" class="layui-input" lay-verType="tips">
                                    </div>
                                </div>
                                <br>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="login">立即登录</button>
                                        <a href="/home/user/forget" type="reset" class="layui-btn layui-btn-warm" >找回密码</a>
                                        <a href="/home/user/register" type="reset" class="layui-btn layui-btn-primary" >注册</a>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <!-- end case-content -->

    <style>
        .login-codeimg {height: 35px;}
        .service-contact .login{background-color: #f9f9f9; padding: 10px;}
        .service-contact-box .login{background: #fff; height: 370px; padding:10px; box-sizing: border-box;font-size: 16px;}
        .service-contact-box .login h3{font-size: 20px; color: #333; padding-bottom:30px; text-align: center;}
    </style>
</block>
<block name="script">
    <script type="text/javascript">
        layui.use(['carousel', 'jquery', 'element', 'form', 'layer'], function () {
            var carousel = layui.carousel
                , laypage = layui.laypage
                , element = layui.element
                , layer = layui.layer
                ,form = layui.form
                , $ = layui.$;
            $('#vercode').click(function () {
                var src = '{:captcha_src()}';
                $(this).attr('src', src + '?' + Math.random());
                return false;
            });
            form.on('submit(login)', function(data){
                $.ajax({
                    url: "{:url('/home/user/login')}",
                    type: 'post',
                    dataType: 'json',
                    data: data.field
                })
                    .done(function (res) {
                        if (res.code ==1) {
                            layer.msg(res.msg, {
                                icon: 1,
                                time: 2000 //2秒关闭（如果不配置，默认是3秒）
                            }, function(){
                                window.location.href="/home/homeuser/index/index";
                            });
                        } else {
                            layer.msg(res.msg, {
                                closeBtn: 0
                                ,anim: 2 //动画类型
                            });
                            $('#vercode').click();
                        }
                    })
                    .fail(function () {
                        layer.msg('服务器异常,请稍后再试', {
                            time: 1500,
                            icon: 5
                        });
                    })
                    .always(function () {

                    });
                return false;
            });

            $('.app-header-menuicon').on('click', function () {
                $('.header-down-nav').toggleClass('down-nav')
            })

        });
    </script>
</block>